<template>
  <div class="wai">
    <app-top></app-top>

    <div class="prod">
      <img :src="product.prodImage" width="400px"  alt="" />

      <div class="desc">
        <h3>{{ product.prodName }}</h3>
        <p>商品价格： ￥{{ product.price }}</p>
        <p>库存：{{ product.pnum }}</p>
        <p>商品类型：{{ product.typeName }}</p>

        <p> {{ product.description }}</p>

          <img src="@/assets/images/buy.jpg" alt="" @click="goCart()">
      </div>

      <hr />

      <div class="imageurl">
        <h3>商品详情</h3>

        <img
          v-for="(url, index) in imageUrls"
          :key="index"
          :src="url"
          alt=""
          width="700px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { queryProduct } from "@/api/product.js";
import {addCart} from "@/api/cart.js"

import AppTop from "@/components/home/AppTop.vue";

export default {
  data() {
    return {
      prod_id: null,

      product: {
        prodImage: "",
      },
      imageUrls: [],

     
    };
  },

  created() {
    let id = this.$route.params.id;
    if (id) {
      this.prod_id = id;
      this.getProduct();
    }
  },

  components: { AppTop },

  methods: {
    getProduct() {
      queryProduct(this.prod_id).then((resp) => {
        this.product = resp.data;
        this.imageUrls = this.product.imageurls.split(",");
      });
    },

    goCart(){
      //alert("加入公务车")
      addCart(this.prod_id).then(resp=>{
        if(resp.code == 2000){
          this.$router.push("/cart")
        }
        //console.log(resp);
      })
    }
  },
};
</script>

<style scoped>
.prod {
  width: 1226px;

  margin: auto;
  margin-top: 30px;

  /* border: 1px red solid; */
}

.desc {
  margin-top: 50px;
  width: 826px;
  text-align: center;
  float: right;
}

.desc h3 {
  color: #666;
  font-size: 48px;
}
.desc p {
  font-size: 30px;
  line-height: 50px;
}

.desc p:last-of-type {
  font-size: 20px;
}

.imageurl {
  width: 700px;
  margin: auto;

  text-align: center;
}
.imageurl h3{
  font-size: 48px;
  margin: 15px 0px;

}
.imageurl img{
  vertical-align: bottom;
}
</style>